<template>
  <div style="min-height: 450px">
    <a-table ref="userRoleTable" :bordered="{cell:true}" :pagination="false" stripe :data="state.allRoles"  row-selection="{type: 'checkbox', showCheckedAll: false}"  row-key="id" @select="handleSelectionChange">
      <template #columns>
        <a-table-column title="角色名称" data-index="roleName"></a-table-column>
      </template>
    </a-table>
    <div class="mt10">
      <a-button type="primary" size="mini" @click="saveUserRole">确定</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";

const userRoleTable = ref(null)
let props = defineProps({
  entityId : {type : Number, default: 0}
})
const state = reactive({
  allRoles :[],
  selectRoles:[],
})
const handleSelectionChange = (selectRows)=>{
  state.selectRoles = selectRows
}
const saveUserRole = ()=>{
  const userRoles = [];
  userRoles.push(...state.selectRoles)
  axios.post('/sys/useradmin/saveuserrole', {userId : props.entityId, userRoles:userRoles}).then(res=>{
    const {code,msg} = res;
    if(code === '200'){
      Message.success(msg)
    }
  })
}
const loadUserRole = ()=>{
  axios.post('/sys/useradmin/listuserrole', {userId : props.entityId}).then(res => {
    const { data } = res
    const {allRoles, userRoles} = data
    state.allRoles = allRoles
    state.selectRoles = userRoles.map( (item) => item.id)
    nextTick(()=>{
      userRoleTable && userRoleTable.value.select(state.selectRoles, true)
    })
  })
}
onMounted(()=>{
  loadUserRole();
})
</script>

<style scoped>

</style>
